<template>
  <div>
    <div class="match-performance-items">
      <div class="performanceClass">大名单</div>
    </div>
    <div class="box-card">
      <el-container>
        <el-header height="57px" class="pass-header"> </el-header>
        <el-main class="pass-main">
          <div class="table-title">
            <div class="table-title-number">号码</div>
            <div class="table-title-name">姓名</div>
            <div class="table-title-nationality">国籍</div>
            <div class="table-title-appearance">出场次数(首发)</div>
            <div class="table-title-minutes">出场时间(分钟)</div>
            <div class="table-title-goal">进球(扑救)</div>
            <div class="table-title-assist">助攻(出击)</div>
            <div class="table-title-cards">黄牌/红牌</div>
          </div>
          <div class="role-position">
            <div class="role-position-block"></div>
            <span>前锋</span>
          </div>
          <SquadTable :roleData="striker" />
          <div class="role-position">
            <div class="role-position-block"></div>
            <span>中场</span>
          </div>
          <SquadTable :roleData="midfield" />
          <div class="role-position">
            <div class="role-position-block"></div>
            <span>后卫</span>
          </div>
          <SquadTable :roleData="defender" />
          <div class="role-position">
            <div class="role-position-block"></div>
            <span>守门员</span>
          </div>
          <SquadTable :roleData="goalkeeper" />
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import SquadTable from "./SquadTable";
export default {
  name: "TeamSquad",
  components: {
    SquadTable,
  },
  props: {
    teamId: {
      type: Number,
    },
    season: {
      type: String,
      default() {
        return "2019赛季";
      },
    },
  },
  watch: {
    teamId: {
      handler(teamId) {
        this.getSquadList(parseInt(this.season), teamId);
      },
      immediate: true,
    },
    season: {
      handler(newSeason) {
        this.getSquadList(parseInt(newSeason), this.teamId);
      },
      immediate: true,
    },
  },
  data() {
    return {
      teamSquad: [],
    };
  },
  methods: {
    async getSquadList(seasonId, teamId) {
      const { data } = await axios.get(
        `http://8.141.159.127:3000/api/v1/teamfeatures/players/${seasonId}/${teamId}`
      );
      // console.log(data);
      this.teamSquad = data;
    },
  },
  computed: {
    striker() {
      return this.teamSquad.filter((player) => {
        return player.role === "前锋";
      });
    },
    midfield() {
      return this.teamSquad.filter((player) => {
        return player.role === "中场";
      });
    },
    defender() {
      return this.teamSquad.filter((player) => {
        return player.role === "后卫";
      });
    },
    goalkeeper() {
      return this.teamSquad.filter((player) => {
        return player.role === "门将";
      });
    },
  },
  created() {
    this.getSquadList(2019);
  },
};
</script>

<style scoped lang="scss">
.match-performance-items {
  display: flex;
  justify-content: flex-start;
  width: 1440px;
  height: 56px;
  margin: 40px auto 0;
  /*background-color: red;*/
}
.performanceClass {
  color: #16c79a;
  line-height: 56px;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 5px;
  text-align: center;
  width: 132px;
  height: 100%;
  background-color: #194568;
  border-radius: 10px 10px 0 0;
  margin-right: 3px;
}
.box-card {
  margin: auto;
  width: 1440px;
  height: 553px;
}
.pass-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #194568;
  padding: 0;
  div {
    margin-right: 10px;
  }
}
.pass-main {
  height: 1030px;
  padding: 0;
  background-color: #f1f6f9;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.table-title {
  width: 80%;
  height: 35px;
  margin: 20px auto 0;
  display: flex;
  font-size: 20px;
  font-weight: bold;
  color: rgba(101, 111, 115, 0.75);
  justify-content: flex-start;
  align-items: center;
}
.table-title-number {
  margin-left: 13px;
}
.table-title-name {
  margin-left: 80px;
}
.table-title-nationality {
  margin-left: 130px;
}
.table-title-appearance {
  margin-left: 110px;
}
.table-title-minutes {
  margin-left: 20px;
}
.table-title-goal {
  margin-left: 15px;
}
.table-title-assist {
  margin-left: 20px;
}
.table-title-cards {
  margin-left: 20px;
}
.role-position {
  margin-top: 20px;
  margin-left: 130px;
  width: 90px;
  height: 35px;
  font-size: 20px;
  font-weight: bold;
  line-height: 35px;
  /*background-color: red;*/
  display: flex;
  justify-content: flex-start;
}
.role-position > span {
  margin-left: 10px;
}
.role-position-block {
  width: 8px;
  height: 100%;
  background-color: #1a936f;
}
</style>
